<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>平均气电比（Nm3/h）</span>
      </div>
      <el-row type="flex" justify="space-between">
        <el-col :span="4">
          <div class="dodgerblue minh" @click="dialogVisible = true">
            <div class="stitle">35</div>
            <el-divider></el-divider>
            <div class="sname">智物联一号设备</div>
            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="90%"
              :before-close="handleClose"
            >
              <dialoga></dialoga>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="lawngreen minh">
            <div class="stitle">47</div>
            <el-divider></el-divider>
            <div class="sname">智物联二号设备</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="tomato minh">
            <div class="stitle">29</div>
            <el-divider></el-divider>
            <div class="sname">智物联三号设备</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="orange minh">
            <div class="stitle">63</div>
            <el-divider></el-divider>
            <div class="sname">智物联四号设备</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="slategrey minh">
            <div class="stitle">46</div>
            <el-divider></el-divider>
            <div class="sname">智物联五号设备</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-row type="flex" justify="space-between" style="margin-top: 30px">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>设备地区分布</span>
          </div>
          <chart></chart>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>近15天事件、故障、报警记录统计</span>
          </div>
          <chartb></chartb>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between" style="margin-top: 30px">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>近7天服务统计</span>
          </div>
          <chartc></chartc>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>设备地图分布</span>
          </div>
          <mymap></mymap>
        </el-card>
      </el-col>
    </el-row>

    <!-- <el-card class="box-card" style="margin-top:50px;">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >操作按钮</el-button
        >
      </div>
      <div v-for="o in 4" :key="o" class="text item">
        {{ "列表内容 " + o }}
      </div>
    </el-card> -->
  </div>
</template>
<script>
import chart from "@/components/home/chart1";
import chartb from "@/components/home/chart2";
import chartc from "@/components/home/chart3";
import mymap from "@/components/home/map";
import dialoga from '../../components/home/equipment1/main'
export default {
  components: {
    chart,
    chartb,
    chartc,
    mymap,
    dialoga
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped>
.dodgerblue {
  background-color: dodgerblue;
}
.deepskyblue {
  background-color: deepskyblue;
}
.lawngreen {
  background-color: lawngreen;
}
.tomato {
  background-color: tomato;
}
.orange {
  background-color: orange;
}
.slategrey {
  background-color: slategrey;
}

.minh {
  min-height: 80px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.stitle {
  font-size: 50px;
  color: white;
}
.sunit {
  font-size: 10px;
}
.sname {
  text-align: center;
  color: white;
}
.el-divider--horizontal {
  margin: 0;
}
</style>
